<template>
	<view>
		<view class="user_head gradient_bg4">
			<view class="login_area FlexAlign" v-if="user_Infos" @click="ToUserCenter">
				<view class="user_icon">
					<u-image :lazy-load="true" :src="user_Infos.avatar" width="100%" height="100%">
						<u-loading slot="loading"></u-loading>
					</u-image>
				</view>
				<view class="userInfo">
					<view class="name">
						{{user_Infos.nickname}}
					</view>
				</view>
			</view>

			<view class="login_area FlexAlign" @click="ToLogin" v-else>
				<view class="none_icon FlexRow">

					<i class="iconfont icon-a-lujing14"></i>
				</view>
				<view class="userInfo">
					<view class="name">
						{{$zhTran('点击登录')}}
					</view>
					<view class="txt">
						{{$zhTran('登录体验更多功能')}}
					</view>
				</view>
			</view>
			<view class="balance_area FlexRow">
				<view class="balance_item FlexItem">
					<view class="num">
						{{user_Infos.user_money || 0}}{{user_Infos.user_money_unit || ''}}
					</view>
					<view class="txt">
						{{$zhTran('余额')}}
					</view>

				</view>
				<view class="balance_item FlexItem" @click="toPath('/bundle/pages/coupon/coupon')">
					<view class="num">{{user_Infos.coupon || 0}}</view>
					<view class="txt">{{$zhTran('优惠券')}}</view>
				</view>

			</view>

		</view>

		<view class="userOuter">
			<view class="user_innter" v-for="(item1, index1) in Menu_List" :key="index1" v-if="item1.show">
				<!-- 标题 -->
				<view class="inn_head FlexBetween">
					<view class="tit">
						{{item1.title}}
					</view>
					<navigator v-if="item1.isMore" :url="item1.morePath">
						<view class="more">
							<text>
								{{item1.moreTxt}}
							</text>
							<i class="iconfont icon-xiangyoujiantou"></i>
						</view>
					</navigator>

				</view>
				<!-- 我的订单 -->
				<view class="menulist style1 FlexBetween" v-if="item1.type == 1">
					<view class="menuItem FlexColumn Theme1" @click="OrderClick(index2)"
						v-for="(item2, index2) in item1.children" :key="index2">
						<view class="icon FlexRow">
							<!-- <u-image :lazy-load="true" :src="item2.imgSrc" width="100%" height="100%"  mode="widthFix">
								<u-loading slot="loading"></u-loading>
							</u-image> -->
							<i class="iconfont " :class="item2.icon"></i>
						</view>

						<view class="txt">
							{{item2.title}}
						</view>
					</view>
				</view>

				<!-- 司机中心 -->
				<view class="menulist style2 FlexBetween" v-if="item1.type == 2">
					<view class="menuItem FlexColumn" v-for="(item2, index2) in item1.children" :key="index2">
						<view class="numval">
							{{item2.value || 0}}
						</view>
						<view class="txt">
							{{item2.title}}
						</view>
					</view>
				</view>

				<!-- 我的服务 -->
				<!-- <view class="menulist style1 FlexAlign" v-if="item1.type == 3">
					<view class="menuItem FlexColumn" style="margin-right: 74rpx"
						v-for="(item2, index2) in item1.children" @click="serveClick(item2)">
						<view class="icon FlexRow">
							<u-image width="52rpx" height="52rpx" :src="$getImageUri(item2.url)" />
						</view>
						<view class="txt">
							{{item2.name}}
						</view>
					</view>
				</view> -->

				<view class="serve-nav flex flex-wrap" v-if="item1.type == 3">
					<block v-for="(item2, index2) in item1.children" :key="index2">
						<view class="nav-item flex-col col-center" @tap="serveClick(item2)">
							<u-image width="52rpx" height="52rpx" :src="$getImageUri(item2.url)" mode="widthFix" />
							<view class="xs m-t-12">{{item2.name}}</view>
						</view>
					</block>
				</view>
			</view>
		</view>


		<w-jishuzhichi />
		<tabbar />
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		apiGetPage
	} from '@/api/store'
	import Cache from '@/utils/cache'


	import {
		apiUserCentre
	} from '@/api/user.js'
	import {
		External_menu_order,
		External_menu_driver,
		External_menu_serve,
	} from "./js/index.js"
	export default {
		data() {
			return {
				styles: {},
				pagesData: [],
				percent: 0,
				Menu_List: [],
				user_Infos: '',
				userserve: []
			}
		},
		onShow() {
			this.getPage()
		},
		methods: {
			// 获取用户个人信息
			getUerInfo() {
				// let store_token = uni.getStorageSync('store_token')
				// if(!store_token) {  // 没有登录

				// }
				// else {

				// }
				this.setMenuList()
				apiUserCentre({
					clsp_id: false
				}).then(res => {
					this.user_Infos = res
					this.setMenuList(res)
					uni.stopPullDownRefresh()
				})
			},
			getPage() {
				apiGetPage({
					type: 3,
				}).then(res => {
					const {
						content
					} = res

					let userserve = [];
					content.forEach(item => {
						if (item.name == 'userserve') {
							item.content.data.forEach(val => {
								userserve.push({
									name: val.name,
									path: val.link.path,
									url: val.url,
								})
							})
						}
					})
					this.userserve = userserve
					this.getUerInfo()
					console.log('userserve', this.userserve)
				})
			},
			// 设置订单数量显示
			setmenuOrder(res) {
				let obj = JSON.parse(JSON.stringify(External_menu_order))
				if (res) {
					for (let val of obj) {
						let {
							key
						} = val
						val.value = res[key] || 0
					}
				}
				return obj
			},
			setMenuList(res) {
				this.Menu_List = [{
						title: '我的订单',
						children: this.setmenuOrder(res),
						isMore: true,
						moreTxt: '全部订单',
						morePath: '/bundle4/pages/order/orderlist',
						type: 1,
						show: true,
					},
					{
						title: '我的服务',
						children: this.userserve,
						isMore: false,
						type: 3,
						show: true,
					},
				]
			},
			OrderClick(index) {
				uni.navigateTo({
					url: `/bundle4/pages/order/orderlist?screentype=${index + 1}`
				})
			},
			serveClick(item2) {
				console.log('item2', item2)
				uni.navigateTo({
					url: item2.path,
				})
			},
			toPath(path) {
				uni.navigateTo({
					url: path,
				})
			},
			// 去登录
			ToLogin() {
				uni.navigateTo({
					url: '/bundle2/pages/login/login'
				})
			},
			// 去个人信息
			ToUserCenter() {
				uni.navigateTo({
					url: '/bundle/pages/user_profile/user_profile'
				})
			},

		},
		onPullDownRefresh() {
			this.getUerInfo()
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/bundle4/css/Flex.scss";

	.user_head {

		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		min-height: 350rpx;
		// background: linear-gradient(133.8deg, #015CD6 0%, #589FFC 100%);
		width: 100%;

		.login_area {
			width: 100%;
			padding: 30rpx 36rpx;

			.user_icon {
				width: 110rpx;
				height: 110rpx;
				border-radius: 100%;
				margin-right: 20rpx;
				overflow: hidden;

			}

			.none_icon {
				width: 110rpx;
				height: 110rpx;
				// background: rgba(102, 168, 255, 1);
				border: 4rpx solid #fff;
				border-radius: 100%;
				margin-right: 20rpx;
				overflow: hidden;

				i {
					font-size: 50rpx;
					color: #E6FF28;
				}
			}

			.userInfo {
				.name {
					font-size: 32rpx;
					font-weight: 500;
					text-align: left;
					color: #fff;
					vertical-align: top;

				}

				.txt {
					margin-top: 6rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #fff;
					text-align: left;
					vertical-align: top;

				}
			}
		}

		.balance_area {
			width: 100%;

			.balance_item {
				.num {
					font-size: 32rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					vertical-align: top;

				}

				.txt {
					margin-top: 4rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					vertical-align: top;

				}
			}
		}
	}


	.userOuter {
		width: 100%;
		position: relative;
		z-index: 11;
		padding: 0 20rpx;
		top: 280rpx;

		// padding-top: 280rpx;
		.user_innter {
			width: 100%;
			min-height: 232rpx;
			border-radius: 14rpx;
			background: #FFFFFF;
			margin-bottom: 20rpx;
			padding: 0 28rpx;

			&:last-of-type {
				margin-bottom: 0;
			}
		}

		.serve-nav {
			padding: 26rpx 0 0;

			.nav-item {
				width: 25%;
				margin-bottom: 30rpx;
			}
		}

		.inn_head {
			width: 100%;
			height: 84rpx;
			border-bottom: solid 1px #EAEAEA;

			.tit {
				font-size: 28rpx;
				font-weight: 550;
				color: rgba(38, 38, 38, 1);
				text-align: left;
				vertical-align: top;

			}

			.more {
				text {
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(149, 149, 149, 1);
					text-align: right;

				}

				i {
					color: #959595;
					font-size: 22rpx;
					display: inline-block;
					margin-left: 8rpx;
				}
			}
		}

		.menulist {
			width: 100%;

			// border:solid 1px red;
			&.style1 {
				padding: 30rpx 0;

				.menuItem {
					height: 100%;

					&.Theme1 {
						.icon {
							width: 60rpx;
							height: 60rpx;
							background: linear-gradient(90deg, #003232 0%, #014343 44.26%, #024B4B 64.12%, #035959 100%);
							border-radius: 100%;

							i {
								color: #E6FF28;
								font-size: 26rpx;
							}
						}
					}

					.icon {


						position: relative;

						i {
							font-size: 40rpx;
							color: #03ADAD;
						}
					}

					.txt {
						margin-top: 18rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(38, 38, 38, 1);
						text-align: center;
						vertical-align: top;

					}
				}
			}

			&.style2 {
				padding: 30rpx 0;

				.menuItem {
					height: 100%;
					min-width: 150rpx;

					.numval {
						font-size: 32rpx;
						font-weight: 500;
						color: rgba(38, 38, 38, 1);
						text-align: center;
					}

					.txt {
						margin-top: 14rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #959595;
						text-align: center;
						vertical-align: top;

					}
				}
			}

		}
	}
</style>